<style lang="less">
    @import "../../../styles/table.less";

    .ivu-input-number {
        width: 42px;
    }
</style>
<template>
    <div class="search">
        <Row>
            <Col>
                <Card title="段位等级管理">
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    import circleLoading from "../../my-components/circle-loading.vue";

    export default {
        name: "duan-manage",
        components: {
            circleLoading
        },
        data() {
            return {
                loading: false, // 表单加载状态
                operationLoading: false,
                drop: false,
                selectCount: 0, // 多选计数
                selectList: [], // 多选数据
                dropDownContent: "展开",
                dropDownIcon: "ios-arrow-down",
                searchForm: {
                    pageNumber: 1, // 当前页数
                    pageSize: 10, // 页面大小
                    sort: "createTime", // 默认排序字段
                    order: "desc", // 默认排序方式
                    studentName: "",
                    mobile: "",
                    startDate: "",
                    endDate: ""
                },
                selectDate: null, //选择日期绑定modal
                columns: [
                    {
                        title: "星级",
                        key: "duanName",
                        width: 80,
                        fixed: 'left',
                        align: 'center',
                    }, {
                        title: "青铜",
                        align: 'center',
                        children: [
                            {
                                title: 'III级',
                                key: 'qt13',
                                align: 'center',
                                width: 80,
                                render: (h, params) => {
                                    if (params.row.qt13 > 0) {
                                        return h("InputNumber", {
                                            props: {
                                                value: params.row.qt13,
                                                min: 1,
                                                width: '50px',
                                                size: 'small',
                                                precision: 0
                                            },
                                            on: {
                                                "on-change": v => {

                                                }
                                            }
                                        });
                                    } else {
                                        return h("div", 'x');
                                    }
                                }

                            }, {
                                title: 'II级',
                                key: 'qt12',
                                align: 'center',
                                width: 80,
                                render: (h, params) => {
                                    if (params.row.qt12 > 0) {
                                        return h("InputNumber", {
                                            props: {
                                                value: params.row.qt12,
                                                min: 0,
                                                width: '50px',
                                                size: 'small',
                                                precision: 0
                                            },
                                            on: {
                                                "on-change": v => {
                                                    this.changePrice(params.row, v);
                                                }
                                            }
                                        });
                                    } else {
                                        return h("div", 'x');
                                    }
                                }
                            }, {
                                title: 'I级',
                                key: 'qt11',
                                align: 'center',
                                width: 80,
                                render: (h, params) => {
                                    if (params.row.qt11 > 0) {
                                        return h("InputNumber", {
                                            props: {
                                                value: params.row.qt11,
                                                min: 0,
                                                width: '50px',
                                                size: 'small',
                                                precision: 0
                                            },
                                            on: {
                                                "on-change": v => {
                                                    this.changePrice(params.row, v);
                                                }
                                            }
                                        });
                                    } else {
                                        return h("div", 'x');
                                    }
                                }
                            }
                        ]
                    }, {
                        title: "白银",
                        align: 'center',
                        children: [
                            {
                                title: 'III级',
                                key: 'by13',
                                align: 'center',
                                width: 80,
                                render: (h, params) => {
                                    if (params.row.by13 > 0) {
                                        return h("InputNumber", {
                                            props: {
                                                value: params.row.by13,
                                                min: 0,
                                                width: '50px',
                                                size: 'small',
                                                precision: 0
                                            },
                                            on: {
                                                "on-change": v => {
                                                    this.changePrice(params.row, v);
                                                }
                                            }
                                        });
                                    } else {
                                        return h("div", 'x');
                                    }
                                }
                            }, {
                                title: 'II级',
                                key: 'by12',
                                align: 'center',
                                width: 80,
                                render: (h, params) => {
                                    if (params.row.by12 > 0) {
                                        return h("InputNumber", {
                                            props: {
                                                value: params.row.by12,
                                                min: 0,
                                                width: '50px',
                                                size: 'small',
                                                precision: 0
                                            },
                                            on: {
                                                "on-change": v => {
                                                    this.changePrice(params.row, v);
                                                }
                                            }
                                        });
                                    } else {
                                        return h("div", 'x');
                                    }
                                }
                            }, {
                                title: 'I级',
                                key: 'by11',
                                align: 'center',
                                width: 80,
                                render: (h, params) => {
                                    if (params.row.by11 > 0) {
                                        return h("InputNumber", {
                                            props: {
                                                value: params.row.by11,
                                                min: 0,
                                                width: '50px',
                                                size: 'small',
                                                precision: 0
                                            },
                                            on: {
                                                "on-change": v => {
                                                    this.changePrice(params.row, v);
                                                }
                                            }
                                        });
                                    } else {
                                        return h("div", 'x');
                                    }
                                }
                            }
                        ]
                    }, {
                        title: "黄金",
                        align: 'center',
                        children: [
                            {
                                title: 'IV级',
                                key: 'hj14',
                                align: 'center',
                                width: 80,
                                render: (h, params) => {
                                    if (params.row.hj14 > 0) {
                                        return h("InputNumber", {
                                            props: {
                                                value: params.row.hj14,
                                                min: 0,
                                                width: '50px',
                                                size: 'small',
                                                precision: 0
                                            },
                                            on: {
                                                "on-change": v => {
                                                    this.changePrice(params.row, v);
                                                }
                                            }
                                        });
                                    } else {
                                        return h("div", 'x');
                                    }
                                }
                            },
                            {
                                title: 'III级',
                                key: 'hj13',
                                align: 'center',
                                width: 80,
                                render: (h, params) => {
                                    if (params.row.hj13 > 0) {
                                        return h("InputNumber", {
                                            props: {
                                                value: params.row.hj13,
                                                min: 0,
                                                width: '50px',
                                                size: 'small',
                                                precision: 0
                                            },
                                            on: {
                                                "on-change": v => {
                                                    this.changePrice(params.row, v);
                                                }
                                            }
                                        });
                                    } else {
                                        return h("div", 'x');
                                    }
                                }
                            }, {
                                title: 'II级',
                                key: 'hj12',
                                align: 'center',
                                width: 80,
                                render: (h, params) => {
                                    if (params.row.hj12 > 0) {
                                        return h("InputNumber", {
                                            props: {
                                                value: params.row.hj12,
                                                min: 0,
                                                width: '50px',
                                                size: 'small',
                                                precision: 0
                                            },
                                            on: {
                                                "on-change": v => {
                                                    this.changePrice(params.row, v);
                                                }
                                            }
                                        });
                                    } else {
                                        return h("div", 'x');
                                    }
                                }
                            }, {
                                title: 'I级',
                                key: 'hj11',
                                align: 'center',
                                width: 80,
                                render: (h, params) => {
                                    if (params.row.hj11 > 0) {
                                        return h("InputNumber", {
                                            props: {
                                                value: params.row.hj11,
                                                min: 0,
                                                width: '50px',
                                                size: 'small',
                                                precision: 0
                                            },
                                            on: {
                                                "on-change": v => {
                                                    this.changePrice(params.row, v);
                                                }
                                            }
                                        });
                                    } else {
                                        return h("div", 'x');
                                    }
                                }
                            }
                        ]
                    }, {
                        title: "铂金",
                        align: 'center',
                        children: [
                            {
                                title: 'V级',
                                key: 'bj15',
                                align: 'center',
                                width: 80
                            }, {
                                title: 'IV级',
                                key: 'bj14',
                                align: 'center',
                                width: 80
                            }, {
                                title: 'III级',
                                key: 'bj13',
                                align: 'center',
                                width: 80
                            }, {
                                title: 'II级',
                                key: 'bj12',
                                align: 'center',
                                width: 80
                            }, {
                                title: 'I级',
                                key: 'bj11',
                                align: 'center',
                                width: 80
                            }
                        ]
                    }, {
                        title: "钻石",
                        align: 'center',
                        children: [
                            {
                                title: 'V级',
                                key: 'zs15',
                                align: 'center',
                                width: 80
                            }, {
                                title: 'IV级',
                                key: 'zs14',
                                align: 'center',
                                width: 80
                            }, {
                                title: 'III级',
                                key: 'zs13',
                                align: 'center',
                                width: 80
                            }, {
                                title: 'II级',
                                key: 'zs12',
                                align: 'center',
                                width: 80
                            }, {
                                title: 'I级',
                                key: 'zs11',
                                align: 'center',
                                width: 80
                            }
                        ]
                    }],
                data: [{
                    duanName: '一星',
                    qt13: 1,
                    qt12: 2,
                    qt11: 2,
                    by13: 3,
                    by12: 3,
                    by11: 4,
                    hj14: 4,
                    hj13: 4,
                    hj12: 4,
                    hj11: 5,
                    bj15: 5,
                    bj14: 5,
                    bj13: 6,
                    bj12: 6,
                    bj11: 6,
                    zs15: 6,
                    zs14: 7,
                    zs13: 8,
                    zs12: 9,
                    zs11: 10,
                },
                    {
                        duanName: '二星',
                        qt13: 1,
                        qt12: 2,
                        qt11: 2,
                        by13: 3,
                        by12: 3,
                        by11: 4,
                        hj14: 4,
                        hj13: 4,
                        hj12: 4,
                        hj11: 5,
                        bj15: 5,
                        bj14: 5,
                        bj13: 6,
                        bj12: 6,
                        bj11: 6,
                        zs15: 6,
                        zs14: 7,
                        zs13: 8,
                        zs12: 9,
                        zs11: 10,
                    },
                    {
                        duanName: '三星',
                        qt13: 1,
                        qt12: 2,
                        qt11: 2,
                        by13: 3,
                        by12: 3,
                        by11: 4,
                        hj14: 4,
                        hj13: 4,
                        hj12: 4,
                        hj11: 5,
                        bj15: 5,
                        bj14: 5,
                        bj13: 6,
                        bj12: 6,
                        bj11: 6,
                        zs15: 6,
                        zs14: 7,
                        zs13: 8,
                        zs12: 9,
                        zs11: 10,
                    },
                    {
                        duanName: '四星',
                        qt13: 0,
                        qt12: 0,
                        qt11: 0,
                        by13: 3,
                        by12: 3,
                        by11: 4,
                        hj14: 4,
                        hj13: 4,
                        hj12: 4,
                        hj11: 5,
                        bj15: 5,
                        bj14: 5,
                        bj13: 6,
                        bj12: 6,
                        bj11: 6,
                        zs15: 6,
                        zs14: 7,
                        zs13: 8,
                        zs12: 9,
                        zs11: 10,
                    },
                    {
                        duanName: '五星',
                        qt13: 0,
                        qt12: 0,
                        qt11: 0,
                        by13: 0,
                        by12: 0,
                        by11: 0,
                        hj14: 0,
                        hj13: 0,
                        hj12: 0,
                        hj11: 0,
                        bj15: 5,
                        bj14: 5,
                        bj13: 6,
                        bj12: 6,
                        bj11: 6,
                        zs15: 6,
                        zs14: 7,
                        zs13: 8,
                        zs12: 9,
                        zs11: 10,
                    }], // 表单数据
                total: 0 // 表单数据总数
            }
        },
        methods: {
            getDataList() {

            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getDataList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                this.searchForm.startDate = "";
                this.searchForm.endDate = "";
                // 重新加载数据
                this.getDataList();
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = "展开";
                    this.dropDownIcon = "ios-arrow-down";
                } else {
                    this.dropDownContent = "收起";
                    this.dropDownIcon = "ios-arrow-up";
                }
                this.drop = !this.drop;
            },
            selectDateRange(v) {
                if (v) {
                    this.searchForm.startDate = v[0];
                    this.searchForm.endDate = v[1];
                }
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getDataList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getDataList();
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
                this.getDataList();
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            add() {

            },
            edit(v) {

            },
            remove(v) {

            },
            delAll() {

            }
        }
    }
</script>
